<template>
  <el-row :gutter="40">
    <el-col v-if="!data.form.id">
      <el-empty description="请选择左侧菜单后操作" :image-size="100"></el-empty>
    </el-col>
    <template v-else>
      <el-col :lg="12">
        <h2>{{ data.form.meta.title || '新增菜单' }}</h2>
        <el-form
          :model="data.form"
          :rules="data.rules"
          ref="dialogFormRef"
          label-width="80px"
          label-position="left"
        >
          <el-form-item label="显示名称" prop="meta.title">
            <el-input v-model="data.form.meta.title" clearable></el-input>
          </el-form-item>
          <el-form-item label="上级菜单" prop="parentId">
            <el-cascader
              v-model="data.form.parentId"
              :options="data.menuOptions"
              :props="data.menuProps"
              :show-all-levels="false"
              placeholder="顶级菜单"
              clearable
              :disabled="data.form.parentId ? false : true"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="类型" prop="meta.type">
            <el-radio-group v-model="data.form.meta.type">
              <el-radio-button label="menu">菜单</el-radio-button>
              <el-radio-button label="iframe">Iframe</el-radio-button>
              <el-radio-button label="link">外链</el-radio-button>
              <el-radio-button label="button">按钮</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="别名" prop="name">
            <el-input
              v-model="data.form.name"
              clearable
              placeholder="菜单别名"
            ></el-input>
            <div class="el-form-item-msg">
              系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏
            </div>
          </el-form-item>
          <el-form-item label="菜单排序" prop="number">
            <el-input-number
              v-model="data.form.number"
              :min="0"
              :step="1"
              step-strictly
              clearable
            ></el-input-number>
          </el-form-item>
          <el-form-item label="菜单图标" prop="meta.icon">
            <sc-icon-select
              v-model="data.form.meta.icon"
              clearable
            ></sc-icon-select>
          </el-form-item>
          <el-form-item label="路由地址" prop="path">
            <el-input v-model="data.form.path" clearable></el-input>
          </el-form-item>

          <el-form-item
            label="功能控制"
            prop="functions"
            v-if="data.form.children.length == 0"
          >
            <el-checkbox
              v-for="item in data.form.functions"
              v-model="(item as any).isSelect"
              :key="(item as any).id"
            >
              {{ (item as any).title }}
            </el-checkbox>
            <div class="el-form-item-msg">控制菜单与按钮的绑定关系</div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save" :loading="data.loading">
              保 存
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </template>
  </el-row>
</template>
<script lang="ts" setup>
import netIconSelect from '@/components/netIconSelect/index.vue';
import scIconSelect from '@/components/scIconSelect/index.vue';
import { reactive, ref, unref, watch } from 'vue';
import menuApi from '@/api/menu/index';
import { ElMessageBox, ElMessage } from 'element-plus';
let prop = defineProps({
  menu: { type: Object, default: () => {} },
});
let emit: any = defineEmits();
let data = reactive({
  form: {
    id: '',
    parentId: '',
    name: '',
    number: 0,
    path: '',
    functions: [],
    meta: {
      title: '',
      icon: '',
      type: 'menu',
    },
    children: [],
  },
  menuOptions: [],
  menuProps: {
    value: 'id',
    label: 'title',
    checkStrictly: true,
  },
  predefineColors: [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#67C23A',
    '#00ced1',
    '#409EFF',
    '#c71585',
  ],
  rules: [] as any,
  apiListAddTemplate: {
    code: '',
    url: '',
  },
  loading: false,
  serverMenuId: '',
});
watch(
  () => prop.menu,
  () => {
    data.menuOptions = treeToMap(prop.menu);
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非* state.someObject 被整个替换了
  },
  { deep: true }
);
//简单化菜单
const treeToMap = (tree: any) => {
  const map: any = [];
  tree.forEach((item: any) => {
    var obj = {
      id: item.id,
      parentId: item.parentId,
      title: item.meta.title,
      children:
        item.children && item.children.length > 0
          ? treeToMap(item.children)
          : null,
    };
    map.push(obj);
  });
  return map;
};
let dialogFormRef = ref();
const setData = (childrenData: any, mode: string) => {
  data.form = childrenData;
};
/**
 * 保存方法
 */
const save = async () => {
  data.loading = true;
  const res = await menuApi.menusave.post(data.form);
  data.loading = false;
  if (res.code !== 0) {
    ElMessage.warning(res.message);
    return false;
  }
  data.serverMenuId = res.data;
  ElMessage.success('保存成功');
  emit('on-save', data.serverMenuId);
};
defineExpose({ setData });
</script>
